<template>
    <div class="container">
        <tab></tab>
        <div class="carousel-todo-wrap base-width">
            <div class="carousel">
                <el-carousel :interval="2000" arrow="never">
                    <el-carousel-item v-for="item in CarouseImg" :key="item.id">
                        <img :src="item.httpUrl" class="carousel-img" alt="">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="todo-wrap">
                <div class="todo-title">
                   <p style="line-height: 22px">今日待办</p>
                    <span class="add-todo">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" style="fill: #101010;">
                        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                    </svg>
                    </span>
                </div>
            </div>
        </div>
        <div class="center-top-wrap base-width">
            <div class="my-friend">
                <p class="friend-title">我的好友</p>
                <ul class="friend-list">
                    <li class="item" v-for="item in 4" :key="item">
                        <img class="avatar" src="https://img1.baidu.com/it/u=2356019866,341589594&fm=26&fmt=auto&gp=0.jpg" alt="">
                        <div class="info-wrap">
                            <p>胡崇均</p>
                            <p>这家伙很懒</p>
                        </div>
                        <span class="iconfont">&#xe6ab;</span>
                    </li>
                </ul>
            </div>
            <person-article :tab="tabList" :len="2"></person-article>
        </div>
        <div class="center-wrap base-width">
            <div class="left-wrap">
               <article-list title="最近阅读" :array="3" :is-icon="false" height="64"></article-list>
            </div>
            <div class="right-wrap">
                <article-list title="最近回复" :is-slot="true">
                    <template v-slot:default>
                        <li v-for="item in 3" :key="item">
                            <p class="revert">乌拉姆将我带进机房，指着一台美国数据设备公司（DEC）生产的POP-5小型机说</p>
                        </li>
                    </template>
                </article-list>
            </div>
        </div>
        <div class="release-wrap base-width">
            <p class="title">我的文章</p>
            <ul class="center-content-wrapper"
                v-if="articleList.length"
            >
                <li class="content-item"
                    v-for="item in articleList"
                    :key="item.id"
                    @click="handleContent(item.id)"
                >
                    <div class="content-wrapper">
                        <h1 class="title">{{item.articleTitle}}</h1>
                        <p class="content">{{item.articleContent}}</p>
                        <ul class="article-info">
                            <li class="author">{{item.authorName}}</li>
                            <li class="date">{{item.createTime}}</li>

                            <li class="review">
                                <span class="iconfont">&#xe603;</span>
                                {{item.commitCount}}
                            </li>
                            <li class="favour">
                                <span class="iconfont">&#xe674;</span>
                                {{item.likeCount}}
                            </li>
                            <li class="preview">
                                <span class="iconfont">&#xe70c;</span>
                                {{item.readCount}}
                            </li>
                        </ul>
                    </div>
                    <img v-if="item.image" :src="item.image" class="content-image">
                </li>
            </ul>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import tab from '../../base/tab/tab'
import Footer from '../../base/footer/Footer'
// import MyRelate from "../../components/my-relate/MyRelate";
import PersonArticle from "../../base/personl-article/PersonArticle";
import ArticleList from "../../base/article-list/ArticleList";
import { getCarouselImg } from "../../api/home";
import { ERROR_NO } from "../../util/config";
export default {
    data () {
      return {
          CarouseImg: [],
          articleList: [
              {
                  "id": "1",
                  "articleTitle": "来来往往的列车",
                  "articleContent": "天气一天比一天冷,尤其下过雨后，满地水坑里的梧桐落叶黄澄澄的，像打破的鸡蛋,漫\r\n无目的地躺在湿漉漉的柏油路。计算机发明后不久，人们就发现需要为这些信息系统处理威胁。早在1994年，NSA和DARPA",
                  "authorName": "S8O",
                  "likeCount": "35",
                  "readCount": "62",
                  "commitCount": null,
                  "image": "https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/06/09/ChMlWV6R6ruIHgHNACLkyRG-bZ8AAOPoAI6zNMAIuTh325.jpg",
                  "createTime": "2021-03-31"
              },
              {
                  "id": "2",
                  "articleTitle": "画心",
                  "articleContent": "永徽十八年，康翊皇帝于长筠殿驾崩，此后数年，国力渐微，四世而亡。大延旧民曾叹道：“百年王朝，盛世皆系于永徽一朝。”后世史书所记对这位英年君主极尽赞誉，然只有一点是为败笔：“空置后宫，子嗣不昌，国祚难延",
                  "authorName": "z!EG[0[",
                  "likeCount": "14533",
                  "readCount": "23459",
                  "commitCount": null,
                  "image": "https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0C/05/ChMkJ14dLNeIfJBuAAZKuwc_TagAAwWUAJPWVAABkrT442.jpg",
                  "createTime": "2021-04-02"
              },
              {
                  "id": "3",
                  "articleTitle": "魔方",
                  "articleContent": "车子七拐八拐地开进了巷子，进了一道锈迹斑斑的铁门，几乎要擦着两旁满是粉笔画与广告纸的老墙，终于在一栋缀满青苔的楼前停了下来。",
                  "authorName": "S8O",
                  "likeCount": "43534",
                  "readCount": "5347",
                  "commitCount": null,
                  "image": "https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/05/02/ChMkKV9gQvOIHFYKACgz7XMOi5wAACUHwGP4ScAKDQF558.jpg",
                  "createTime": "2021-04-02"
              },
              {
                  "id": "4",
                  "articleTitle": "小麦进城",
                  "articleContent": "小胡是偷偷跑出来的，她要去找那个男人一那个不负责任的男人， 那个让她母亲痛苦多年的\r\n男人，她要去讨要原本属于她的一切!",
                  "authorName": "z!EG[0[",
                  "likeCount": "3454365",
                  "readCount": "6456",
                  "commitCount": null,
                  "image": "https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/08/0D/ChMkKl_ZzLuIOF4PABBJnhFyx28AAG1vAPds8AAEEm2223.jpg",
                  "createTime": "2021-04-02"
              },
              {
                  "id": "5",
                  "articleTitle": "梦醒时分",
                  "articleContent": "凌晨2点多的街道，霓虹灯依旧闪亮得似白昼，让人不至于被黑暗吞没。\n\n安琪扶着路边的大树，感觉一阵又一阵的反胃，这棵城市用来装饰的树竟有一天成了她唯一的依靠。她感觉有点累，便靠着大树滑坐下来，她想：要不",
                  "authorName": "S8O",
                  "likeCount": "43543",
                  "readCount": "5346",
                  "commitCount": null,
                  "image": "https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/06/09/ChMlWV6R6ruIHgHNACLkyRG-bZ8AAOPoAI6zNMAIuTh325.jpg",
                  "createTime": "2021-04-02"
              },
              {
                  "id": "6",
                  "articleTitle": "时令",
                  "articleContent": "  指针在时间的坐标轴上交缠在一起，正点时刻。林揉着惺忪的睡眼，瘫坐在餐桌前，桌上是母亲清早去市场上淘来的最新鲜的水果。她没有理睬，胡乱抓了把面包和着咖啡咽了下去。这是个隐秘的征兆，是个迫使她不自在的",
                  "authorName": "z!EG[0[",
                  "likeCount": "345",
                  "readCount": "34535",
                  "commitCount": null,
                  "image": "https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0B/0D/ChMkJlvfvraIQt_gAATk6y5jB5IAAs9wwEnfMsABOUD395.jpg",
                  "createTime": "2021-04-02"
              },
              {
                  "id": "8081873246439022592",
                  "articleTitle": "标题",
                  "articleContent": " <pre><code class=\"Java\"><xmp>public class Base64Util {\n    private static final char last2byte = (c",
                  "authorName": "胡崇均",
                  "likeCount": "1",
                  "readCount": "5",
                  "commitCount": null,
                  "image": "",
                  "createTime": "2021-05-15 19:42"
              }
           ],
          tabList: ['发表文章','发表帖子','发表视频','暂定']
      }
    },
    methods: {
        handleContent(id) {
            console.log(id)
        }
    },
    created () {
        getCarouselImg().then(res => {
            if (res.code === ERROR_NO) {
                this.CarouseImg = res.data.CarouseImg
            }
        })
    },
    components: {
        tab,
        Footer,
        ArticleList,
        PersonArticle
    }
}
</script>

<style scoped lang="scss">
    @import "./src/common/scss/variable";
    @import "./src/common/scss/mixin";
    .container {
        /deep/ .tab-wrapper {
            position: relative;
            background: $bg-tab;
            opacity: 0.83;
        }

        .carousel-todo-wrap {
            display: flex;
            align-items: center;
            margin: 14px auto;
            column-gap: 10px;

            .carousel {
                max-width: 1200px;
                width: 100%;
                height: 230px;
                border-radius: 20px;
                overflow: hidden;

                ::v-deep .el-carousel__container {
                    height: 230px !important;
                }

                ::v-deep .el-carousel__button {
                    width: 12px;
                    height: 12px;
                    opacity: 1;
                    border-radius: 50%;
                    background-color: #dddddd;
                }

                ::v-deep .el-carousel__indicator.is-active button {
                    background-color: #333333;
                }

                .carousel-img {
                    width: 100%;
                    height: 230px;
                    object-fit: cover;
                }
            }

            .todo-wrap {
                max-width: 242px;
                width: 100%;
                height: 230px;
                overflow: hidden auto;
                padding: 14px 20px;
                box-sizing: border-box;
                border-radius: 20px;
                border: 1px solid $border-color;

                .todo-title {
                    display: flex;
                    align-content: center;
                    line-height: 24px;
                    justify-content: space-between;
                    font-weight: 600;
                    color: $color-font;
                    font-size: 14px;

                    .add-todo {
                        cursor: pointer;
                    }
                }
            }
        }

        .center-top-wrap {
            display: flex;
            column-gap: 13px;

            .my-friend {
                max-width: 288px;
                width: 100%;
                height: 363px;
                border: 1px solid $border-color;
                margin-bottom: 18px;
                padding: 14px 10px 14px 20px;
                box-sizing: border-box;
                border-radius: 20px;

                .friend-title {
                    line-height: 30px;
                    font-weight: 500;
                    color: $font-gray;
                    font-size: 20px
                }

                .friend-list {
                    margin-top: 10px;

                    .item {
                        display: flex;
                        align-items: center;
                        padding: 8px 0 5px;
                        box-sizing: border-box;
                        column-gap: 5px;

                        .avatar {
                            width: 52px;
                            height: 52px;
                            border-radius: 50%;
                            border: 0;
                        }

                        .info-wrap {
                            flex: 1;
                            font-size: 14px;
                            line-height: 21px;
                            opacity: .89;
                            overflow: hidden;

                            p {
                                @include no-wrap();
                            }
                        }

                        .iconfont {
                            font-size: 24px;
                            font-weight: 700;
                            color: $border-color;
                            cursor: pointer;
                        }

                        & + .item {
                            border-top: 2px solid $border-color;
                        }
                    }
                }
            }
        }

        .center-wrap {
            display: flex;
            margin: 18px auto;
            column-gap: 14px;

            .left-wrap, .right-wrap {
                flex: 1;
                min-height: 288px;
                border-radius: 20px;
                color: $font-gray;

                ::v-deep .item {
                    padding-bottom: 10px;
                    border-bottom: 1px solid $border-color;
                }
            }

            .right-wrap {
                .revert {
                    height: 44px;
                    line-height: 44px;
                    margin: 16px 0;
                    background-color: rgba(222, 220, 220, 100);
                    color: rgba(93, 91, 91, 100);
                    font-size: 14px;
                    text-align: center;
                    border: 1px solid $border-color;
                }
            }
        }

        .release-wrap {
            margin-bottom: 20px;
            padding: 12px 25px;
            box-sizing: border-box;
            border: 1px solid $border-color;
            border-radius: 20px;
            .title {
                margin-bottom: 20px;
                line-height: 30px;
                color: rgba(16, 16, 16, 100);
                font-size: 20px;
            }
            .center-content-wrapper {
                .content-item {
                    display: flex;
                    justify-content: space-between;
                    border-bottom: 1px solid rgb(246, 246, 246);
                    cursor: pointer;

                    .content-wrapper {
                        display: flex;
                        flex-direction: column;

                        .title {
                            margin-bottom: 13px;
                            line-height: 20px;
                            color: rgb(51, 51, 51);
                            font-size: 15px;
                        }

                        .content {
                            margin-bottom: 14px;
                            font-size: 13px;
                            line-height: 16px;
                            color: rgb(159, 159, 159);
                            overflow: hidden;
                            text-overflow: ellipsis;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 3;
                        }

                        .article-info {
                            display: flex;
                            font-size: 11px;
                            margin-bottom: 17px;
                            line-height: 13px;
                            color: rgb(159, 159, 159);

                            .review, .favour, .preview {
                                .iconfont {
                                    margin-right: 2px;
                                }
                            }

                            li + li {
                                margin-left: 24px;
                            }
                        }
                    }

                    .content-image {
                        margin: 0 21px;
                        flex-shrink: 0;
                        width: 232px;
                        height: 90px;
                        object-fit: cover;
                    }

                    & + .content-item {
                        margin-top: 14px;
                    }
                }
            }
        }
    }
</style>
